<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

    <!-- 
      ? 想要在数据变化之后，获取到最新的DOM如何办 ?
        1. updated 钩子函数中获取
        2. setTimeout()
        3. $nextTick()  官方更推荐的一个api

      nextTick:
        作用：
          在数据变化之后，想要获取到最新的DOM时使用
        概念：
          在下次 DOM 更新循环结束之后执行延迟回调
        内部：
          采用 微任务 实现的，如果浏览器不支持 微任务的话，他就直接使用的时 setTimeout
        语法：
          Vue2:
            this.$nextTick(callback)
          Vue3:
            Vue.nextTick(callback)
     -->


    <div id="app">
      <p id="p1">{{ msg }}</p>
      <p id="p2">{{ count }}</p>
      <button @click="onChange">修改数据</button>
    </div>

    <script src="../lib/vue3.js"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            msg: "hello",
            count: 1
          };
        },

        methods: {
          // 数据发生变化之后，想要立刻获取到最新的DOM数据是不行的
          onChange() {
            this.msg += '~'
            Vue.nextTick(() => {
              console.log(document.getElementById('p1').innerHTML) // hello~
            })
            
            this.count++
            console.log(document.getElementById('p2').innerHTML) // 1
          }

          // 该函数执行，触发 updated 几次？  一次
          // onChange() {
          //   this.msg += '~'
          //   this.count++
          // }

          // 该函数执行，触发 updated 几次？  二次
          // onChange() {
          //   this.msg += '~'

          //   setTimeout(() => {
          //     this.count++
          //   })
          // }


          
        },

        updated() {
          console.log('=== updated')
        }
      }).mount("#app");
    </script>
  </body>
</html>
